<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//RU" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Новогодний Твит!</title>
<link href="{base_url}/favicon.ico" rel="shortcut icon" type="image/ico" />
<script type="text/javascript" src="{base_url}js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" defer="defer" >
	$(document).ready(function(){
	var url = '{base_url}images/xmas/';
	var smiles = {2 : ':)',
			5: ':(',
			1: ':P',
			3: ':O',
			4: '<3'};
	var smile_name = {2: 'Улыбка',
			5: 'Печаль',
			1: 'Язык',
			3: 'Шок',
			4: 'Сердце'}
	function sort(obj)
	{
		var tmp, size = 5, n = 1;
		for(i = size; i > n; i--)
		{

			if( obj[i].cnt*1 > obj[i-1].cnt*1)
			{
				tmp = obj[i];
				obj[i] = obj[i-1];
				obj[i-1] = tmp;
			}
			if((i-1) == n) n++, i = size+1;
		}
		return obj;
	}
	
	function getTweet()
	{
		$.getJSON('{base_url}xmas/getTweet',
			function(tweet){
				var sml = {1 : {id : 1, cnt: 0},
						2 : {id : 2, cnt: 0},
						3 : {id : 3, cnt: 0},
						4 : {id : 4, cnt: 0},
						5 : {id : 5, cnt: 0}};
				$('div#name').text(tweet.tweet.name);
				$('div#text').text(tweet.tweet.text);
				$('div#nick').text('@'+tweet.tweet.screen_name);
				sml[1].cnt = tweet.tweet.smile1;
				sml[2].cnt = tweet.tweet.smile2;
				sml[3].cnt = tweet.tweet.smile3;
				sml[4].cnt = tweet.tweet.smile4;
				sml[5].cnt = tweet.tweet.smile5;
				sml = sort(sml);
				
				$('div#deerface img').attr('src',url+sml[1].id+'.jpg');
				$('div#leed').text(smile_name[sml[1].id]);
				for(i = 1; i <=5; i++)
				{
					$('div#s'+i+' div.smile').text(smiles[sml[i].id]);
					$('div#s'+i+' div.count').text(sml[i].cnt);
				}
				
			});
	}
	
		setInterval(getTweet, 15000);
		getTweet();
		

	});
</script>
<style type="text/css">
	body {
		/*background-color: #05418e;*/
		margin: 0px;
	}
	div {
		border: 0px;
		margin: 0px ! important;
		max-width: 240px ! important;
		overflow-wrap: hyphenate ! important;
		overflow: hidden;
	}
	div#twipanel {
		background: url('{base_url}images/xmas/topbg.png') repeat-x;
		height: 25px;
		margin: 0px;
	}
	div#twits {
		background-color: white;
		border-radius: 5px;
		float: left;
		width: 234px;
		height: 209px;
		padding: 3px;
	}
	div#smiles {
		background-color: #ee531d;
		/*border-radius: 5px;*/
		margin-left: 450px;
		float: left;
		height: 120px;
		padding: 5px;
		width: 230px;
		color: white;
	}
	div#name {
		font-weight: bold;
	}
	div#text{
		/*font-size: 10pt;*/
		font-family: arial; 
		font-size: 80%;
		height: 90px;
	}
	div#nick {
		font-size: 8pt;
		color: gray;
		display: none;
	}
	div#VGUES {
		height: 70px;
		color: #444444;
		font-weight: bold;
	}
	div#VGUESlogo {
		float: left;
	}
	div#AT {
		font-size: 16pt;
		margin: 8px 0px 0px 35px ! important;
	}
	div#slogan{
		font-size: 10pt;
		margin: 5px 0px 0px 56px ! important;
	}
	div#deerface {
		height: 120px;
		width: 100px;
		border-radius: 5px;
		background-color: white;
		margin-bottom: 10px ! important;
		float: left;
	}
	div.smile {
		float: left;
		width: 23px;
		height: 23px;
		color: white;
		text-align: center;
		vertical-align: central;
		overflow-wrap: inherit ! important;
		font-size: 11pt;
		font-weight: bold;
		padding-top: 1px;
		background-image: url('../images/xmas/smileblue.png');
		background-repeat: no-repeat;
		background-size: 22px;
	}
	div.count {
		float: left;
		height: 23px;
		width: 23px;
		overflow-wrap: inherit ! important;
		font-size: 11pt;
		padding-left: 3px;
	}
	div#s1.line {
		width: 100px ! important;
		height: 72px;
		font-size: 11pt ! important;
		font-weight: bolder ! important;
		margin-bottom: 10px ! important;
		float: none;
		text-align: center;
		vertical-align: bottom;
	}
	div#s1 div.smile{
		background-image: url('../images/xmas/smile.png');
		background-repeat: no-repeat;
		background-size: 22px;
		color: #444;
	}
	div#s1 .count{
		width: 22px;
	}
	div.line {
		width: 23px;
		float: left;
		height: 52px;
		padding-right: 3px;
	}
	div#leed{
		float: left;
		width: 52px;
		overflow: hidden;
		font-size: 8pt;
		padding-top: 4px;
	}
	.smiles{
		float: left;
		padding: 0px 0 0 15px;
	}
	a{
		text-decoration: none;
		outline: none;
		color: #444444;
	}
	a:visited {
		text-decoration: none;
		outline: none;
		color: #444444;
		
	}
	a img {
		border: 0px;
	}
</style>
</head>
<body>
<div id='content'>
	<div id='twipanel'>
		<a href='http://twitter.com' target='blank'><img src="{base_url}images/xmas/twilogo.png" alt="twilogo" /></a>
	</div>
	<div id="smiles">
		<div id='deerface'>
			<img src="" height="120px" alt="*DEERFACE*" />
		</div>
		<div class="smiles">
			<div class="line" id="s1">
				Настроение Рудольфа: <br /><br />
				<div id='leed'></div>
				<div class="smile"></div>
				<div class="count"></div>
			</div>
			<div class="line" id="s2">
				<div class="smile"></div>
				<div class="count"></div>
			</div>
			<div class="line" id="s3">
				<div class="smile"></div>
				<div class="count"></div>
			</div>
			<div class="line" id="s4">
				<div class="smile"></div>
				<div class="count"></div>
			</div>
			<div class="line" id="s5">
				<div class="smile"></div>
				<div class="count"></div>
			</div>
		</div>
	</div>
	<div id="twits">
	<div id='tweet'>
		<div id="VGUES">
			<div id="VGUESlogo"><img src="{base_url}images/xmas/VVSU.png" height ="65px"/></div>
			<div id='AT'><a href='http://twitter.com/vgues' target='blank'>@VGUES</a></div>
			<div id="slogan">Пиши Рудольфу!</div>
		</div>
		<div id="name"></div>
		<div id="text"></div>
		<div id="nick"></div>
	</div>
	</div>
</div>
</body>
</html>
